<template>
  <div>
    <el-container>
      <el-header height="70px">
        <p class="header_title">咨询管理</p>
        <!--  -->
        <el-breadcrumb separator="/">
          <el-breadcrumb-item>咨询维护</el-breadcrumb-item>
          <el-breadcrumb-item>咨询管理</el-breadcrumb-item>
          <el-breadcrumb-item></el-breadcrumb-item>
        </el-breadcrumb>
      </el-header>

      <el-main>
        <el-card class="box-card">
          <div slot="header">
            <span>咨询列表</span>
          </div>

          <el-row :gutter="20">
            <el-col :span="4">
              <el-button
                type="success"
                class="add"
                @click="addDialogVisible = true"
                >添加</el-button
              >
            </el-col>
            <el-col :span="10">
                <b class="sum_data">数据总数：</b>
               <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pagination.pagenum"
                :page-size="pagination.pagesize"
                :page-sizes="[3, 5, 10, 20]"
                layout="total, sizes"
                :total="pagination.total"
                class="top_nav">
               </el-pagination>
            </el-col>
          </el-row>

          <!-- 表格 -->
          <el-table :data="pagelist" style="width: 100%" border stripe>
            <el-table-column prop="title" label="标题" width="200px">
            </el-table-column>
            <el-table-column prop="image" label="图片">
              <template slot-scope="scope">
                <el-image
                  :src="scope.row.image"
                  style="width:50px;height:50px"
                  fit="cover"
                ></el-image>
              </template>
            </el-table-column>
            <el-table-column
              prop="topping"
              label="是否置顶"
              width="120px"
              :formatter="topFormate"
            >
            </el-table-column>
            <el-table-column
              prop="display"
              label="是否显示"
              width="120px"
              :formatter="displayFormate"
            >
            </el-table-column>
            <el-table-column
              prop="date"
              label="创建时间"
              width="160px"
            ></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="primary" size="mini" @click="showEditDialog(scope.row)"
                  >编辑</el-button
                >
                <el-button type="danger" size="mini" @click="removeEditDialog(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>

          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pagination.pagenum"
            :page-size="pagination.pagesize"
            background
            layout="prev, pager, next,total"
            :total="pagination.total"
          >
          </el-pagination>
        </el-card>
      </el-main>
    </el-container>

    <!-- 添加对话框 -->
    <el-dialog
      title="添加行为信息"
      :visible.sync="addDialogVisible"
      width="60%"
      @close="addDialogClosed">
      <el-form
        :model="addForm"
        :rules="addFormRules"
        ref="addFormRef"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="标题" prop="title">
          <el-input v-model="addForm.title"></el-input>
        </el-form-item>
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="是否显示" prop="display">
              <el-switch
                active-color="#13ce66"
                inactive-color="#ff4949"
                v-model="addForm.display"
                active-value="1"
                inactive-value="0"
              ></el-switch>
            </el-form-item>
          </el-col>

          <el-col :span="11">
            <el-form-item label="是否置顶" prop="topping">
              <el-switch
                active-color="#13ce66"
                inactive-color="#ff4949"
                v-model="addForm.topping"
                active-value="1"
                inactive-value="0"
              ></el-switch>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="置顶排序" prop="order">
          <el-input v-model="addForm.order" type="number"></el-input>
        </el-form-item>

        <el-form-item prop="file">
          <div class="pictitle">
            <b>上传头像</b>(请上传文件大小不超过1MB的正方形图片)
          </div>
          <el-upload
            class="avatar-uploader"
            ref="upload"
            action="#"
            :data="addForm"
            :show-file-list="false"
            :multiple="false"
            :auto-upload="false"
            :on-change="imgSaveToUrl"
          >
            <img v-if="this.addForm.image" :src="this.addForm.image" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>

        <el-form-item prop="content" label="文章内容">
          <template>
            <quill-editor v-model="addForm.content"> </quill-editor>
          </template>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addConsult">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 编辑对话框 -->


  </div>
</template>

<script>
export default {
  data() {
    return {
      consultInfo: {
        total: 1,
        messages: "",
      },
      consultlist: [],
      pagination: {
        pagenum: 1,
        pagesize: 5,
        total: 2,
      },
      pagelist: [],
      // 添加对话框显示与隐藏
      addDialogVisible: false,
      addForm: {
        title: "",
        display: "true",
        topping: "true",
        order: "",
        image: "",
        content: "",
      },
      file:"",
      // 添加表单的校验
      addFormRules: {
        title: [{ required: true, message: "请输入标题", trigger: "blur" }],
        order: [{ required: true, message: "请输入排序", trigger: "blur" }],
      },
      //对话框的显示与隐藏
      editDialogVisible: false,
      // // 查询用户信息对象
      editForm: {
        content: "",
        display: "",
        image: "",
        order: "",
        title: "",
        topping: "",
      },
       file: "",
      // // 修改表单的校验规则对象
      editFormRules: {
        title: [{ required: true, trigger: "blur" }],
        order: [{ required: true, message: "请输入数值", trigger: "blur" }],
        content: [{ required: true, trigger: "blur" }],
      },
      editlist: [],

    };
  },
  methods: {
    async getConsultList() {
      const res = await this.http.get("/message/select", this.pagination);
      this.pagelist = res.messages;
      this.pagination.total = res.total;
      console.log(res);
    },
    handleSizeChange(newSize) {
      this.pagination.pagesize = newSize;
      this.getConsultList(0);
    },
    // 监听 页码值 改变
    handleCurrentChange(newPage) {
      this.pagination.pagenum = newPage;
      this.getConsultList();
    },
    //图片上传
    async imgSaveToUrl(event) {
      if (this.beforeUploadPicture(event.raw)) {
        var formData = new FormData();
        console.log(formData);
        formData.append("file", event.raw);
        this.http.upload("/message/upload", formData).then((res) => {
          if (res.code == 200) {
            this.addForm.image= res.data
            console.log(res.data);
            console.log(this.addForm)
            this.$message.success("上传成功");
          }
        });
      }
    },
    // 图片上传之前
    beforeUploadPicture(file) {
      const isJPG = file.type === "image/jpeg";
      const isPNG = file.type === "image/png";
      const isLt10M = file.size / 1024 / 1024 < 10;

      if (!isJPG && !isPNG) {
        this.$message.error("上传头像图片只能是 JPG 或者 PNG 格式!");
      }
      if (isJPG && isPNG) {
        if (!isLt10M) {
          this.$message.error("上传头像图片大小不能超过 10MB!");
        }
      }

      return (isJPG || isPNG) && isLt10M;
    },

    // 监听增添行为对话框的关闭事件
    addDialogClosed() {
      this.$refs.addFormRef.resetFields();
    },
    // 添加行为
    addConsult() {
      this.$refs.addFormRef.validate(async (valid) => {
        if (!valid) return;
        // 发起添加网络请求

        const { res } = await this.http.post("/message/add", this.addForm);
        console.log(res);

        if (status !== 400) {
          this.$message.error("添加行为失败");
        }
        this.$message.success("添加行为成功");
        this.addDialogVisible = false;
        this.getConsultList();
      });
    },
    // 是否置顶
    topFormate(row, index) {
      if (row.topping == 1) {
        return "是";
      } else {
        return "否";
      }
    },
    //是否显示
    displayFormate(row, index) {
      if (row.display == 1) {
        return "是";
      } else {
        return "否";
      }
    },
    async removeEditDialog(row){
      console.log(row);
        const confirmResult = await this.$confirm(
        "此操作将永久删除该用户, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((error) => error);
      console.log(confirmResult);
      if (confirmResult !== "confirm") {
        return this.$message.info("已取消删除");
      }
        const res =await this.http.post("/message/delete",row.id)
        console.log(res);
        this.getConsultList();
    },
    // 修改资讯
    showEditDialog(row){
      console.log(row);
    }

    
    
  },
  created() {
    this.getConsultList();
  },
};
</script>

<style scoped>
/* upload头像上传 */
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  border: 2px dashed #dedede;
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.ql-editor .ql-blank {
  height: 100px;
}
</style>
